<template>
    <div class="inviteCourseBox">
        <!-- 搜索栏 start-->
        <div class="invite-sub">
            <img class="invite-logo" src="../../static/image/icon-title.png" alt="">
            <span class="inviteSearch">
              <input type="text" placeholder="搜索">
              <img src="../../static/image/sousuo.png" alt="">
            </span>
        </div>
        <!-- 搜索栏 end-->
        <!-- main start-->
        <div class="invite-course">
            <div class="public-header">
              <h2 class="public-header-ch">管理员邀请课程</h2>
              <p class="public-header-en">INVITED COURSER</p>
              <div class="public-header-line"></div>
            </div>
            <div class="invite-course-table">
              <table>
                <thead>
                  <tr>
                    <th>课程名称</th>
                    <th>开课日期</th>
                    <th>开课时间</th>
                    <th>人数</th>
                    <th>管理操作</th>
                  </tr>
                </thead>
                <tbody>
                    <tr v-if="inviteCourse.length == 0">
                        <td colspan="5"  >暂无数据！</td>
                    </tr>
                  <tr v-for="course in inviteCourse" :key="course.courseId">
                    <td>{{course.courseName}}</td>
                    <td>{{course.startData}}</td>
                    <td>{{course.startTime}}</td>
                    <td>{{course.numberOfPeople}}</td>
                    <td>
                        <el-button type="text" class="enroll" @click="dialogAlreadysign = true"><img src="../../static/image/icon-sign.png" alt="">报 名</el-button>
                        <!-- <span class="enroll-already">已报名</span>
                        <span class="enroll-already">已额满</span> -->
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <!-- page start-->
              <el-pagination background layout="prev, pager, next" :total="listTotal" @current-change='getAllData()' v-show="listTotal!=0"></el-pagination>
            <!-- page end-->
        </div> 
        <!-- main end-->  
        <!-- 报名 Dialog-->
        <el-dialog class="signup"
        title=""
        :visible.sync="dialogSignup">
        <div class="signup-course">
            <p>您已向管理员申报</p>
            <p><span>{{courseTime}}</span><span>{{courseName}}</span></p>
            <p>请等待管理员审核</p>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="inviteDialogOver()">确 认</el-button>
        </span>
        </el-dialog>
        <!-- 已报名 Dialog-->
        <el-dialog  class="signup"
        title=""
        :visible.sync="dialogAlreadysign">
        <div class="choose-team">
            <p>报名 <span>{{courseTime}}</span><span>{{courseName}}</span></p>
            <p>选择组别</p>
            <div class="signup-team">
                <div class="team-list" v-for="(team,type) in teams" :key="team.index">
                    <p :class="{teamActive:activeType==type}" @click="selected(type)" class="team-name" >{{team.type}}</p>
                    <div class="team-member">
                        <p v-for="member in team.members" :key="member.index">
                            <span>{{member.name}}</span>
                            <span class="phoneNumber">{{member.phoneNumber}}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogSignup = true">确 认</el-button>
        </span>
        </el-dialog>   
    </div>
</template>
<script>
    export default {
      data() {
        return {
            listTotal:0, // 总条数
            //点击切换组别样式
            activeType:'',
            courseTime:'2018年5月20日',
            courseName:'《像CEO一样思考》商战模拟 公开课',
            // 报名 Dialog
            dialogSignup: false,
            // 已报名 Dialog
            dialogAlreadysign: false,
            //选择组别
            teams:[
                {
                    type:'A组',
                    //组别成员
                    members:[
                        {
                            name:'蒋彦成',
                            phoneNumber:'14234565434',
                        },
                        {
                            name:'蒋彦成',
                            phoneNumber:'14234565434',
                        },
                        {
                            name:'蒋彦成',
                            phoneNumber:'14234565434',
                        },
                    ],
                },
                {
                    type:'B组',
                    //组别成员
                    members:[
                        {
                            name:'蒋彦成',
                            phoneNumber:'14234565434',
                        },
                        {
                            name:'蒋彦成',
                            phoneNumber:'14234565434',
                        },
                    ],
                },
                {
                    type:'c组',
                    //组别成员
                    members:[
                        {
                            name:'蒋彦成',
                            phoneNumber:'14234565434',
                        },
                        {
                            name:'蒋彦成',
                            phoneNumber:'14234565434',
                        },
                        {
                            name:'蒋彦成',
                            phoneNumber:'14234565434',
                        },
                    ],
                },
                {
                    type:'D组',
                    //组别成员
                    members:[
                        {
                            name:'蒋彦成',
                            phoneNumber:'14234565434',
                        },
                        {
                            name:'蒋彦成',
                            phoneNumber:'14234565434',
                        },
                    ],
                },
                {
                    type:'E组',
                    //组别成员
                    members:[
                        {
                            name:'蒋彦成',
                            phoneNumber:'14234565434',
                        },
                        {
                            name:'蒋彦成',
                            phoneNumber:'14234565434',
                        },
                        {
                            name:'蒋彦成',
                            phoneNumber:'14234565434',
                        },
                    ],
                },
                {
                    type:'F组',
                    //组别成员
                    members:[
                        {
                            name:'蒋彦成',
                            phoneNumber:'14234565434',
                        },
                    ],
                },
            ],
            //邀请课程
            inviteCourse:[],
        }
    },
      methods:{
        //点击切换组别样式
        selected:function(type){
            this.activeType = type
        },
        //模态框消失
        inviteDialogOver:function(){
            this.dialogSignup = false;
            this.dialogAlreadysign = false;
        },
        getAllData(currentPage = 1){
            let mobile = JSON.parse(sessionStorage.getItem('login')).mobile;
            let data = {
                mobile : mobile,
                pageNow : currentPage,
                pageSize : 5
            }
            this.$http.adminInviteCourse(data,(res)=>{
                this.inviteCourse = res.data.myCourseList
                this.listTotal = res.data.count;
                console.log(res)
            },(errRres)=>{
                console.log(errRes)
            })
        }
      },
      computed: {
        
      },
      created(){

      },
      mounted(){
          this.getAllData();
      },
    }
  </script>